<template>
  <div>
    <el-dialog
        v-model="centerDialogVisible"
        :title="formTitle"
        width="80%"
        destroy-on-close
        center
        @close="dialogClose">
      <div>
        <el-button class="Btn" size="small" type="danger" @click="addPrincipal">添加</el-button>
      </div>
      <el-table
          height="400px"
          :data="principalData"
          :default-sort="{ prop: 'date', order: 'descending' }"
          style="width: 100%">
        <el-table-column prop="headName" label="负责人" align="center"/>
        <el-table-column prop="headPhone" label="联系电话" align="center"/>
        <el-table-column prop="headAddress" label="地址"/>
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button class="Btn" size="small" type="del" @click="updatePrincipal(scope.row)">
              <svg-icon icon-class="edit" class="buttonSvg"/>
            </el-button>
            <el-button class="btn-donate" size="small" type="del" @click="deletePrincipal(scope.row)">
              <svg-icon icon-class="del" class="buttonSvg"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <add-principal-dialog ref="add_principal_dialog"/>
  </div>
</template>

<script>
import AddPrincipalDialog from "@/views/system/components/AddPrincipalDialog.vue";

let me;
export default {
  name: "CommunityPrincipalDialog",
  components: {AddPrincipalDialog},
  data() {
    return {
      communityId: '',
      formTitle: '',
      centerDialogVisible: false,
      principalData: [{
        headName: '负责人01',
        headPhone: '',
        headAddress: '',
      }],
    }
  },
  methods: {
    showDialog(id) {
      me = this;
      me.communityId = id;
      this.centerDialogVisible = true;
    },
    addPrincipal() {
      this.$refs.add_principal_dialog.showDialog();
    },
    updatePrincipal(row) {
      this.$refs.add_principal_dialog.showDialog(row);
    },
    deletePrincipal() {

    },
    dialogClose() {

    },
  }
}
</script>

<style scoped lang="scss">

</style>